<script setup lang="ts">
import { markRaw, reactive, ref, shallowRef } from 'vue'
import HtxUseMouse from './components/HtxUse1Mouse.vue'
import HtxUseThrottle from './components/HtxUse2Throttle.vue'
import HtxUseClickOutSide from './components/HtxUse3ClickOutSide.vue'
import HtxUseComponent from './components/HtxUse4Component.vue'
import HtxUseVisibility from './components/HtxUse5Visibility.vue'
import HtxUseVBind from './components/HtxUse6V-Bind.vue'
import HtxUseSound from './components/HtxUse7Sound.vue'
import HtxUseColorMode from './components/HtxUse8ColorMode.vue'
import HtxUseEyeDropper from './components/HtxUse9EyeDropper.vue'
import HtxUseWatchEffect from './components/HtxUse10WatchEffect.vue'
// import HtxUseDark from './components/HtxUse11Dark.vue'
import HtxUseFullscreen from './components/HtxUse12Fullscreen.vue'


</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <htx-use-mouse /> -->
  <!-- <htx-use-throttle /> -->
  <!-- <htx-use-click-out-side /> -->
  <!-- <htx-use-component /> -->
  <!-- <htx-use-visibility /> -->
  <!-- <htx-use-v-bind /> -->
  <!-- <htx-use-sound /> -->
  <!-- <htx-use-color-mode /> -->
  <!-- <htx-use-eye-dropper /> -->
  <!-- <htx-use-watch-effect /> -->
  <!-- <htx-use-dark /> -->
  <htx-use-fullscreen />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.dark {
  background-color: #1a1a1a;
}

.ligth {
  background-color: #fff;
}
</style>
